<template>
	<div class="pb50" v-loading="loading">
		<!--订单进度-->
		<!--内容-->
		<div class="product-content">
			<div class="tips tips-border">
				<div class="tips_tit pb">操作提示</div>
				<div class="tips_txt">订单总金额 = 订单支付总金额 + 商户优惠券抵扣金额 + 平台优惠券抵扣金额 + 订单积分抵扣金额 + 运费金额</div>
				<div class="tips_txt">商户结算金额 = 订单总金额 - 平台抽成金额 - 商户优惠券抵扣金额</div>
				<div class="tips_txt">平台抽成金额 = （订单总金额 - 运费金额 - 平台优惠券抵扣金额 - 订单积分抵扣金额） * 平台抽成百分比</div>
				<div class="tips_txt">分销佣金 = （订单支付总金额） * 佣金百分比</div>
				<div class="tips_txt">分销实际佣金 = （订单支付总金额 - 商户退款金额） * 佣金百分比</div>
				<div class="tips_txt">平台实际抽成金额（全部退款则直接0元） = （订单总金额 - 退款金额 - 运费金额 - 商户优惠券抵扣金额） * 平台抽成百分比</div>
				<div class="tips_txt">商户实际结算金额 = 订单总金额 - 退款金额 - 平台实际抽成金额 - 分销佣金 - 商户优惠券抵扣金额</div>
				<div class="tips_txt">平台退款金额 = 平台抽成金额 - 平台实际抽成金额</div>
				<div class="tips_txt">商户退款金额 = 商户结算金额 - 商户实际结算金额</div>
			</div>
			<!--商户结算-->
			<div class="common-form">
				商户结算<span class="common-form-data">订单日期:{{ detail.create_time }}</span>
			</div>
			<div class="cash-body">
				<div class="content">
					<p class="title">订单总金额(不含优惠折扣)(元)</p>
					<p class="money">{{detail.order_money}}</p>
				</div>
				<div class="content">
					<p class="title">运费金额(元)</p>
					<p class="money">{{detail.express_money}}</p>
				</div>
				<div class="content">
					<p class="title">订单支付总金额(含折扣)(元)</p>
					<p class="money">{{detail.pay_money}}</p>
				</div>
				<div class="content">
					<p class="title">商户结算金额(元)</p>
					<p class="money">{{detail.supplier_money}}</p>
				</div>
				<div class="content">
					<p class="title">商户退款金额(元)</p>
					<p class="money">{{detail.refund_supplier_money}}</p>
				</div>
				<div class="content">
					<p class="title">商户实际结算金额(元)</p>
					<p class="money">{{detail.real_supplier_money}}</p>
				</div>
				<div class="content">
					<p class="title">平台抽成金额(元)</p>
					<p class="money">{{detail.sys_money}}</p>
				</div>
				<div class="content">
					<p class="title">平台退款金额(元)</p>
					<p class="money">{{detail.refund_sys_money}}</p>
				</div>
				<div class="content">
					<p class="title">平台实际抽成金额(元)</p>
					<p class="money">{{detail.real_sys_money}}</p>
				</div>
				<div class="content">
					<p class="title">分销佣金(元)</p>
					<p class="money">{{detail.agent_total_money}}</p>
				</div>
				<div class="content">
					<p class="title">实际分销佣金(元)</p>
					<p class="money">{{detail.agent_money||0.00}}</p>
				</div>
				<div class="content">
					<p class="title">退款金额(元)</p>
					<p class="money">{{detail.refund_money}}</p>
				</div>
				<div class="content">
					<p class="title">商户优惠券抵扣金额(元)</p>
					<p class="money">{{order.coupon_money}}</p>
				</div>
				<div class="content">
					<p class="title">平台优惠券抵扣金额(元)</p>
					<p class="money">{{order.coupon_money_sys}}</p>
				</div>
				<div class="content">
					<p class="title">订单积分抵扣金额(元)</p>
					<p class="money">{{order.points_money}}</p>
				</div>
			</div>
			<!--商品信息-->
			<div class="common-form mt16">商品信息</div>
			<div class="table-wrap">
				<el-table size="small" :data="order.product" border style="width: 100%">
					<el-table-column prop="product_name" label="商品" width="400">
						<template #default="scope">
							<div class="product-info">
								<div class="pic">
									<img v-img-url="scope.row.image.file_path" />
								</div>
								<div class="info">
									<div class="name">{{ scope.row.product_name }}</div>
									<div class="gray9" v-if="scope.row.product_attr != ''">
										{{ scope.row.product_attr }}
									</div>
									<div class="orange" v-if="scope.row.refund">
										{{ scope.row.refund.type.text }}-{{
                      scope.row.refund.status.text
                    }}
									</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="product_no" label="商品编码"></el-table-column>
					<el-table-column prop="product_weight" label="重量 (Kg)"></el-table-column>
					<el-table-column prop="total_num" label="购买数量">
						<template #default="scope">
							<p>x {{ scope.row.total_num }}</p>
						</template>
					</el-table-column>
					<el-table-column prop="total_pay_price" label="支付金额(不含运费)(元)">
						<template #default="scope">
							<p>￥ {{ scope.row.total_pay_price }}</p>
						</template>
					</el-table-column>
					<el-table-column prop="total_pay_price" label="运费金额(元)">
						<template #default="scope">
						  <p>￥ {{ detail.express_money }}</p>
						</template>
					</el-table-column>
					<el-table-column prop="total_pay_price" label="退款金额(元)">
						<template #default="scope">
							<p v-if="scope.row.refund">{{ scope.row.refund.refund_money }}</p>
							<p v-else>0</p>
						</template>
					</el-table-column>
					<!--<el-table-column prop="first_money" label="一级分销佣金(元)">
            <template #default="scope">
              <p>￥ {{ scope.row.first_money }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="second_money" label="二级分销佣金(元)">
            <template #default="scope">
              <p>￥ {{ scope.row.second_money }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="third_money" label="三级分销佣金(元)">
            <template #default="scope">
              <p>￥ {{ scope.row.third_money }}</p>
            </template>
          </el-table-column>-->
				</el-table>
			</div>
		</div>
		<div class="common-button-wrapper">
			<el-button size="small" type="info" @click="cancelFunc">返回上一页</el-button>
		</div>
	</div>
</template>

<script>
import {
	detail
} from '@/api/cash.js';
// import {
//   deepClone
// } from '@/utils/base.js';
export default {
	data() {
		return {
			active: 0,
			/*是否加载完成*/
			loading: true,
			/*订单数据*/
			detail: {},
			order: {},
			/*一页多少条*/
			pageSize: 20,
			/*一共多少条数据*/
			totalDataNumber: 0,
			/*当前是第几页*/
			curPage: 1,
		};
	},
	created() {
		/*获取列表*/
		this.getParams();
	},
	methods: {
		/*获取参数*/
		getParams() {
			let self = this;
			// 取到路由带过来的参数
			const params = this.$route.query.settled_id;
			detail({
				settled_id: params,
			},
			true
			)
				.then((data) => {
					self.loading = false;
					self.detail = data.data.model;
					self.order = data.data.order;
				})
				.catch((error) => {
					self.loading = false;
				});
		},

		/*取消*/
		cancelFunc() {
			this.$router.back(-1);
		},
	},
};
</script>
<style>
	.table-wrap {
		padding: 20px;
		padding-top: 0;
	}

	.common-form-data {
		margin-left: 15px;
		font-weight: 500;
	}

	.tips-border {
		border: 1px solid #CACACA;
		padding: 15px;
		margin-bottom: 20px;
	}

	.tips_tit {
		font-size: 22px;
		margin-bottom: 10px;
	}

	.tips_txt {
		line-height: 25px;
		color: #666;
		font-size: 14px;
	}

	.tips-border {
		border: 1px solid #CACACA;
		padding: 15px;
		margin-bottom: 20px;
	}

	.tips_tit {
		font-size: 22px;
		margin-bottom: 10px;
	}

	.tips_txt {
		line-height: 25px;
		color: #666;
		font-size: 14px;
	}

	.cash_t_brief .cash-header {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.cash_t_brief .cash_t_title {
		position: relative;
		padding-left: 10px;
	}

	.cash_t_brief .cash_t_title::before {
		content: '';
		display: inline-block;
		width: 3px;
		height: 14px;
		background-color: #3a8ee6;
		position: absolute;
		left: 0;
		top: 50%;
		border-radius: 5px;
		transform: translateY(-50%);
	}

	.cash_t_common .cash-body {
		padding: 20px;
	}

	.cash-body {
		display: flex;
		justify-content: flex-start;
		padding-bottom: 0 !important;
		padding-right: 50px !important;
		padding-left: 50px !important;
		flex-wrap: wrap;
		position: relative;
		padding: 10px 15px;
		line-height: 24px;
	}

	.content {
		width: 33.3%;
		display: flex;
		flex-direction: column;
		margin-bottom: 30px;
		justify-content: center;
	}

	.content {
		width: 33.3%;
		display: flex;
		flex-direction: column;
		margin-bottom: 30px;
		justify-content: center;
	}

	.money {
		font-size: 20px;
		color: #666;
		font-weight: bold;
		margin-top: 10px;
		max-width: 250px;
	}
</style>